<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0324vue</title>
    <style>
        .main {
            width: 300px;
            margin: 50px 20px;
        }
    </style>
</head>

<body>



    <div id="app" v-clock>
        <div v-for="(item,index) in list" class="main">
            <div v-if="item.data > 0">
                <img width="300" :src="item.image" alt="" srcset="">
                <div>{{item.name}}</div>
                <div>库存:{{item.data}}</div>
                <input type="text" v-model="list[index].data1">
                <input type="button" value="购买" @click="getdata(item.id,list[index].data1)">
            </div>
        </div>



    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        // 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示
        Vue.createApp({
            data() {
                return {
                    list: [
                        { id: 0, data: 100, data1: null, name: "新鲜水果", image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.WJ8I9XKR9CuFgMov1n65QgHaE8?w=304&h=203&c=7&r=0&o=5&pid=1.7" },
                        { id: 1, data: 100, data1: null, name: "iphone14", image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5-JhK658fp4WF3LTn9VOBAHaEy?w=273&h=180&c=7&r=0&o=5&pid=1.7" },
                        { id: 2, data: 100, data1: null, name: "五菱宏光mini", image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.SJR8DPPK7fvQASUeGQMjnAHaEw?w=274&h=180&c=7&r=0&o=5&pid=1.7" }
                    ]
                }
            },
            methods: {
                getdata(id, data) {
                    this.list[id].data -= data
                    // console.log(this.list[id].data);
                    // this.list[id].data1
                }
            }



        }).mount("#app")







    </script>






</body>

</html>